<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="inc/default :: default"></head>
<body>
<div id="pageloading" class="l-loading" style="display:block"></div>
<div class="layui-fluid">
    <!-- breadcrumb -->
    <div class="ad-breadcrumb">
        <div class="layui-breadcrumb" id="crumbs">
        </div>
        <div class="title">查询表格</div>
    </div>

    <!-- main -->
    <div class="layui-card ad-table-card" id="ad-table-card" style="margin-top:20px;">
        <div class="layui-card-header">
            <div class="layui-table-title">
                <h2>表格查询</h2>
                <div class="layui-table-option layui-form demoTable">
                    <div class="layui-upload">
                        <button type="button" class="layui-btn layui-batch-action" id="fileList"><i class="layui-icon">&#xe654;</i>选择文件</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-card-body">
            <div class="layui-col-md12">
                <div class="layui-upload-list">
                    <table class="layui-table" style="text-align: center;">
                        <thead>
                        <tr><th width="30%" style="text-align: center;">文件名</th>
                            <th width="15%" style="text-align: center;">大小</th>
                            <th width="25%" style="text-align: center;">进度</th>
                            <th width="15%" style="text-align: center;">状态</th>
                            <th width="15%" style="text-align: center;">操作</th>
                        </tr></thead>
                        <tbody id="tableList"></tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>
</div>
<script type="text/javascript" th:inline="javascript">
    /*<![CDATA[*/
    var ctxPath = /*[[@{/}]]*/ '';
    /*]]>*/
    var fileList = new Array(); // 用于提交后台的上传文件ID

    ;!function(){
        var upload = layui.upload
            ,element = layui.element;

        var tableListIns = $('#tableList')
            ,uploadListIns = upload.render({
            elem: '#fileList'
            ,url: ctxPath + 'file/upload'
            ,accept: 'file'
            ,skin: 'line'
            ,cellMinWidth: 100
            ,multiple: true
            ,number: 5
            ,auto: true
            ,progress:function(n, elem){
                element.progress('uploadFile', n + '%');
            }
            ,choose: function(obj){
                var files = this.files = obj.pushFile();
                //读取本地文件
                obj.preview(function(index, file, result){
                    var tr = $(['<tr id="upload-'+ index +'">'
                        ,'<td>'+ file.name +'</td>'
                        ,'<td>'+ (file.size/1024).toFixed(1) +'kb</td>'
                        ,'<td>'
                        ,'<div class="layui-progress layui-progress-big layui-progress-radius-fix" lay-showpercent="true" lay-filter="uploadFile">'
                        ,'<div class="layui-progress-bar" lay-percent="0%"><span class="layui-progress-text">0%</span></div></div>'
                        ,'</td>'
                        ,'<td>正在上传</td>'
                        ,'<td>'
                        ,'<button class="layui-btn layui-btn-xs btn-reload'+index+' layui-hide">重传</button>'
                        ,'<button class="layui-btn layui-btn-xs layui-btn-danger btn-delete'+index+'">删除</button>'
                        ,'</td>'
                        ,'</tr>'].join(''));

                    //单个重传
                    tr.find('.btn-reload'+index).on('click', function(){
                        obj.upload(index, file);
                    });

                    //删除
                    tr.find('.btn-delete'+index).on('click', function(){
                        delete files[index];
                        tr.remove();
                        uploadListIns.config.elem.next()[0].value = '';
                    });

                    tableListIns.append(tr);
                });
            }
            ,done: function(res, index, upload){
                if(res.result){
                    fileList.push(res.fileId);
                    var tr = tableListIns.find('tr#upload-'+ index)
                        ,tds = tr.children();
                    tds.eq(3).html('<span style="color: #5FB878;">上传成功</span>');
                    tds.eq(4).html('<button class="layui-btn layui-btn-xs layui-btn-danger btn-delete'+index+'" type="button">删除</button>');

                    $('tr .btn-delete'+index).on('click', function(){
                        $.ajax({
                            type : "post"
                            ,url: ctxPath + 'file/delete'
                            ,data: { fileId: res.fileId }
                            ,success: function(result){
                                if(result) {
                                    tr.remove();
                                    uploadListIns.config.elem.removeAttr("disabled");
                                    uploadListIns.config.elem.removeClass("layui-btn-disabled");
                                    fileList.splice($.inArray(res.fileId, fileList), 1);
                                }
                            }
                            ,error : function(e){
                                console.log(e.status);
                            }
                        });
                    });

                    return delete this.files[index];
                }
                this.error(index, upload);
            }
            ,error: function(index, upload){
                var tr = tableListIns.find('tr#upload-'+ index)
                    ,tds = tr.children();
                tds.eq(2).find('.layui-progress-bar').css('background-color','#ff5722');
                tds.eq(3).html('<span style="color: #FF5722;">上传失败</span>');
                tds.eq(4).find('.btn-reload'+index).removeClass('layui-hide');
            }
        });
    }();
</script>